ページの編集確認に役立つ機能の詰め合わせ 拡張機能のSuperDevを使ってみた

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。

SuperDevとは

SuperDevは、Chromeの拡張機能になります。

デザイナー、開発者、技術者のためのオープンソースのブラウザツールボックス。開発/デザインにかかる時間を最小限に抑え、Webを手間なくデバッグするための様々なツールを提供します。

https://chrome.google.com/webstore/detail/superdev-design-and-dev-t/jlkikimlceonbmfjieipbonnglnlchhl

これ拡張機能一つで、ドライバーやペンチ、カッターとしても使える工具のように、ページの編集に役立つ機能が詰め込まれています。デザインの参考になるページで、少し見た目を変えてみたいときなどに便利だと思います。

試してみた

早速インストールして使ってみます。12個の機能が存在しており、今回はいくつか試してみました。

Text Editor

ページのテキストを編集することができます。

• 編集前

• 編集後

Delete Element、Move Element

ページの指定した要素を、削除したり、移動することができます。

• Delete Elementでグラフを削除

• Move Elementでアイコンを移動

Color Picker、Color Palette

ホバーしている要素の色や、そのページで使われている色の一覧を取得できます。

• Color Picker

• Color Palette

Page Highlight

CSSボックスモデルを、可視化することができます。

Export Element

指定した要素のHTMLやCSSを取得し、編集することができます。

Clear All Cache

ClearAllCacheボタンで、キャッシュをクリアし、ページを元に戻せます。

まとめ

今回は、便利な拡張機能SuperDevを使ってみました。それぞれの機能が、一つの拡張機能として存在するようなクオリティであり、とても便利なので今後も使っていこうと思います。

ではまた。